import React, { Component } from 'react';
import {
	View,
	Text,
	TextInput,
	TouchableOpacity,
	Dimensions,
} from 'react-native';
import Picker from 'react-native-picker';
import ChinaList from 'china-location/dist/location.json';

export default class AreaComponent extends Component {
	/**
	地址三级联动
	 */
	static defaultProps = {
		selectedValue: ['', '', ''], // 默认值
		onChange: val => val, // 切换选中
		pickerTitleText: '', // 标题
		cancelCallBack: false, // 点击取消返回选中值
		confirmCallBack: true, // 点击确定返回选中值
		selectCallBack: false, // 滚动列表返回选中值
		onRef: () => { }, // 父组件获取子组件实例
	};
	constructor(props) {
		super(props);
		this.props.onRef(this);
		this.state = {
			Communitycommunication: this.props.Communitycommunication,
			Communitycommunications: this.props.Communitycommunications,
			Communitycommunicationes: this.props.Communitycommunicationes,
			pd: false
		}
	}
	componentDidMount() {
		//	console.log(this.state.oo)
	}
	getAreaList() {
		// 地址json格式转换
		const proviceArr = [];
		for (const prokey in ChinaList) {
			const { name: provice, cities } = ChinaList[prokey];
			const cityArr = [];
			for (const citkey in cities) {
				const { name: city, districts } = cities[citkey];
				const disArr = [];
				for (const diskey in districts) {
					const area = districts[diskey];
					disArr.push(area);
				}
				cityArr.push({ [city]: disArr });
			}
			proviceArr.push({ [provice]: cityArr });
		}
		return proviceArr;
	}
	ShowPicker = () => {
		//console.log(this.state.Communitycommunication)
		this.setState({
			pd: !this.state.pd
		})

		const {
			cancelCallBack,
			confirmCallBack,
			selectCallBack,
			selectedValue,
			onChange,
			pickerTitleText,
		} = this.props;
		Picker.init({
			pickerData: this.getAreaList(),
			selectedValue: selectedValue, // 初始化选中值
			pickerTitleText: pickerTitleText, // 标题
			pickerConfirmBtnText: '确定',
			pickerCancelBtnText: '取消',
			pickerTitleText: '按县区选择',
			// 背景颜色
			pickerBg: [255, 255, 255, 1],
			// 滚动条字体颜色
			pickerFontColor: [70, 123, 237, 1],
			// 滚动条字体大小
			pickerFontSize: 17,
			// 头部背景颜色
			pickerToolBarBg: [255, 255, 255, 1],
			// 头部字体大小
			pickerToolBarFontSize: 18,
			// 确定键颜色
			pickerConfirmBtnColor: [70, 123, 237, 1],
			// 取消键颜色
			pickerCancelBtnColor: [144, 144, 144, 1],
			onPickerConfirm: pickedValue => {
				// 点击选中
				if (confirmCallBack) {
					onChange(pickedValue);
					this.setState({
						Communitycommunication: pickedValue[2]
					})
				}
			},
			onPickerCancel: pickedValue => {
				this.setState({
					pd: false
				})
				// 点击取消
				if (cancelCallBack) {
					onChange(pickedValue);
				}
			},
			onPickerSelect: pickedValue => {
				// 滚动时候选中的值
				if (selectCallBack) {
					onChange(pickedValue);
				}
			},
		});
		Picker.show();
	};
	hidePicker = () => {
		Picker.hide();
	};
	componentWillUnmount() {
		this.hidePicker();
	}
	render() {
		return (
			<TouchableOpacity onPress={this.ShowPicker} style={!this.state.pd ? this.state.Communitycommunications : this.state.Communitycommunicationes} >
				<Text>{this.state.Communitycommunication}</Text>
			</TouchableOpacity>
		);
	}
}
